<template>
    <div class="nav-life">
        <a
        v-for="(item, index) in quickNav" 
        :key="index"
        class="item"
        :href="item.url"
        target="_blank"
        v-czc="['首页', '点击按钮', '我的桌面导航', 0, 'home-btn-desktop-nav']"
        >
            {{item.name}}
        </a>
    </div>
</template>

<script>
export default {
    data() {
        return {
            quickNav: [],
        };
    },
    methods: {
        queryQuickNav() {
            this.$get(`${this.$store.state.api.tbUrl}/home/gettopnavigate.json`, data => {
                this.quickNav = data;
            });
        },
    },
    mounted() {
        this.queryQuickNav();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.nav-life{
    display: flex;

    .item{
        font-size: 14px;
        line-height: 1em;
        color: #666666;
        position: relative;

        &:hover{
            color: $primaryColor;
        }

        & + .item{
            margin-left: 17px;

            &:before{
                content: '';
                display: block;
                width: 1px;
                height: 100%;
                position: absolute;
                left: -9px;
                background: #666666;
            }
        }
    }
}
</style>